/*
 * @Author: yangzonglong
 * @Date: 2021-03-03 14:44:59
 * @version: v1.0.0
 * @Descripttion: Col 控制器
 * @LastEditors: yangzonglong
 * @LastEditTime: 2023-07-24 22:01:43
 * @Auditor:
 */
import React from 'react';
import { Form, Select, DatePicker, Checkbox } from 'antd';
import FormItemController from './../components/FormItemController';
import useControlOptions from '../../hooks/useControlOptions';
import { DatePickerProps } from './DatePicker';
import moment from 'moment';

const FormItem = Form.Item;
const Option = Select.Option;

export const modeData = [
  { value: 'YYYY/MM', label: '年/月' },
  { value: 'YYYY/MM/DD', label: '年/月/日' },
  { value: 'YYYY/MM/DD HH:mm:ss', label: '年/月/日 时:分:秒' },
];

const modeMap = {
  'YYYY/MM': 'month',
  'YYYY/MM/DD': 'date',
  'YYYY/MM/DD HH:mm:ss': 'date',
};

const Controller = () => {
  const { options, changeFormItemProps, changeControlProps } = useControlOptions<DatePickerProps>('datePickerProps');

  return (
    <FormItemController
      onChangePlaceholder={(e) => changeControlProps('datePickerProps', { ...options?.datePickerProps, placeholder: e }, true)}
      onChangePlaceholderEn={(e) => changeControlProps('datePickerProps', { ...options?.datePickerProps, placeholderEn: e }, true)}
      onChange={changeFormItemProps}
      options={options?.formItemProps}
      placeholder={options?.datePickerProps?.placeholder}
      placeholderEn={options?.datePickerProps?.placeholderEn}
    >
      <FormItem label="显示格式">
        <Select
          onChange={(e) => changeControlProps('datePickerProps', { ...options?.datePickerProps, format: e }, true)}
          value={options?.datePickerProps?.format as string}
        >
          {modeData.map((item) => (
            <Option value={item.value} key={item.value}>
              {item.label}
            </Option>
          ))}
        </Select>
      </FormItem>
      <FormItem className='antd-form-item-row' label="默认当前日期">
        <Checkbox
          onChange={(e) => changeControlProps('datePickerProps', { ...options?.datePickerProps, isInitialValue: e.target.checked }, true)}
          checked={options?.datePickerProps?.isInitialValue} />

        {/* <DatePicker picker={modeMap[options?.datePickerProps?.format as string]} style={{ width: '100%' }} format={options?.datePickerProps?.format} value={options?.formItemProps?.initialValue ? moment(options?.formItemProps?.initialValue) : null} onChange={(e) => {
          changeFormItemProps('initialValue', e ? moment(e).format(options?.datePickerProps?.format as string) : e)
        }} /> */}
      </FormItem>
      <FormItem className='antd-form-item-row' label='日期范围'>
        <Checkbox
          onChange={(e) => changeControlProps('datePickerProps', { ...options?.datePickerProps, rangePicker: e.target.checked }, true)}
          checked={options?.datePickerProps?.rangePicker} />
      </FormItem>
    </FormItemController>
  );
};

export default Controller;
